<template>
    <div id="allocate">
        <el-container>
            <el-main>
                <el-header><h3>请您拉动滑块并做出本轮投资的资产配置决策</h3></el-header>
                <el-statistic style="margin-bottom: 2.5%;">
                    <template slot="formatter">
                        <div>
                            当前未配置的资产比例:<span style="color: #409EFF;">{{parseFloat((100- allocated).toFixed(2))}}%</span>
                        </div>
                    </template>
                </el-statistic>
                <el-card class="box-card">
                    <el-table max-height="300px" border :data="fund" style="width: 80%;margin-left: 10%;">
                    <el-table-column prop="fundName" label="基金名称" width="250" />
                    <el-table-column prop="fundManager" label="基金经理" width="232" />
                    <el-table-column prop="allocationRate" label="配置资产比例" width="600" >
                        <template slot-scope="scope">
                            <el-slider :key="sliderFlush" v-model="scope.row.allocationRate[decision_making_index]" @change="valid_slider()"></el-slider>
                        </template>
                    </el-table-column>
                </el-table>
                </el-card>

            </el-main>
        </el-container>
    </div>
  </template>
  
<script>
  export default {
    name: 'allocate',
    data(){
        return {
            decision_making_index:null,
            allocated:0,
            fund:null,
            sliderFlush:0,
            fund_allocation_copy:null
        }
        },
        methods:{
            calculate_unallocated(){
                this.allocated = 0
                for(let i=0;i<this.fund.length;i++){
                    this.allocated += this.fund[i].allocationRate[this.decision_making_index]
                }
            },
            allocate_data_init(){
                this.decision_making_index = this.$global_data.decision_making_index
                this.fund = this.$global_data.fund
                for(let i=0;i<this.fund.length;i++){
                    this.fund[i].allocationRate.push(this.fund[i].allocationRate[this.decision_making_index-1])
                }
                this.sliderFlush++
                this.fund_copy = JSON.parse(JSON.stringify(this.fund))
                this.$forceUpdate()
            },
            valid_slider(){
                this.sliderFlush++
                let count = 0
                for(let i=0;i<this.fund.length;i++){
                    count += this.fund[i].allocationRate[this.decision_making_index]
                    if(count >100){
                        const h = this.$createElement;
                        this.$message({
                            message: h('p', null, [
                                h('span', null, '错误操作'),
                                h('b', { style: 'color: red' }, '总配置比例不能超过100%！')
                            ])
                        });
                        for(let i=0;i<this.fund.length;i++){
                            this.fund[i].allocationRate[this.decision_making_index] = this.fund_copy[i].allocationRate[this.decision_making_index]  
                        }
                        break
                    }
                }
                this.calculate_unallocated()
            }
    },
    mounted(){
        this.calculate_unallocated() 
    },
    beforeMount(){
        this.allocate_data_init()
    }
    }
</script>
<style>
</style>